<template>
	<div>
		<div class="item" v-for="(item,index) in list" :key="index">
			<div class="item-title border-bottom"  @click="show(index)">
				<i class="iconfont iconjingdian icon"></i>
				<span class="item-title-icon">{{item.title}}</span>
			</div>
			<!-- 递归组件的使用 -->
			<div v-if="item.children" class="item-children" v-show="showchild" >
				<detail-list :list="item.children"></detail-list>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'detailList',
		props:{
			list:Array,
		},
		data(){
			return{
				showchild:false
			}
		},
		methods:{
			show(val){
				// this.showchild=true
				console.log(val)
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.item-title
		line-height .8rem
		font-size .32rem
		padding 0 .2rem
		color #00BCD4
		.icon
			padding-right 0.2rem
			color green
	.item-children
		padding 0 0.5rem
</style>
